import React from 'react';
import {MailOutlined} from '@ant-design/icons'
import './index.less'
import MenuConfig from '../../config/menuConfig'
import {NavLink} from 'react-router-dom'
import { Menu} from 'antd';
const { SubMenu } = Menu;

class NavLeft extends React.Component{
  state={
    menuTreeNode:[]
  }
  componentDidMount(){
    const menuTreeNode = this.renderMenu(MenuConfig)
    this.setState({menuTreeNode})
  }
  renderMenu = (data)=>{
    return data.map((item)=>{
      if(item.children){
        return (
          <SubMenu
           title={item.title} 
           key={item.key}
          >
            {this.renderMenu(item.children)}
          </SubMenu>
        )
      }else{
        return (<Menu.Item key={item.key} title={item.title}>
        {item.title}
        <NavLink to={item.key}></NavLink>
        </Menu.Item>)
      }
    })
  }
  render(){
    return(
         <div>
            <div className="logo">
              <img src="/assets/logo-ant.svg" alt=""/>
              <h1>单车管理系统</h1>
            </div>
            <Menu mode="vertical" theme="dark">
              {this.state.menuTreeNode}
            </Menu>
         </div>
    )
  }
}

export default NavLeft;
